<!-- Dom模板 -->
<template>
  <div class="goodslist">
    <!-- Dom内容 -->
    <div class="title">
      <div class="searchbox">
        <p class="inp">
          商品名称
          <el-input
            placeholder="请输入内容"
            v-model="input"
            clearable
            style="width: 130px"
          >
          </el-input>
        </p>
        <p class="sel">
          商品分类
          <el-select v-model="value" placeholder="请选择" style="width: 100px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>
        <p class="sel1">
          商品状态
          <el-select v-model="value1" placeholder="请选择" style="width: 100px">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>
      </div>
      <div class="bottonlist">
        <span class="import" @click="search">查询</span
        ><span @click="reset">重置</span><span @click="showadd">添加</span>
      </div>
    </div>
    <div class="tablebox">
      <Table
        :list="showdata"
        :table-config="tableConfig"
        @Edit="Edit"
        @Delete="Delete"
        @Undercarriage="Undercarriage"
        @onSortChange="onSortChange"
      />
    </div>
    <div class="pageing">
      <Paging
        :pageData="goodsdata"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
      />
    </div>
    <transition name="goodsinfo">
      <Details v-show="falgs">
        <div class="Liclone">
          <div class="gclon" @click="close">
            <i class="el-icon-arrow-left"></i><span>返回</span>
          </div>
        </div>
        <div class="infocon">
          <p>
            <span>*商品名称：</span>
            <el-input
              placeholder="请输入内容"
              v-model="input1"
              clearable
              style="width: 200px"
            >
            </el-input>
          </p>
          <p>
            <span>*商品图片：</span>
            <el-upload
              class="avatar-uploader"
              :action="img_url_pre"
              :http-request="upload"
              :show-file-list="false"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </p>
          <p>
            <span
              >*商品分类：<el-select
                v-model="value2"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> </el-select
            ></span>
          </p>
          <p>
            <span>*商品单价：</span>
            <el-input
              placeholder="请输入内容"
              v-model="input2"
              clearable
              style="width: 200px"
            >
            </el-input>
          </p>
          <p>
            <span
              >*是否上架：<el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
            </span>
          </p>
        </div>
        <el-button
          type="primary"
          style="width: 100px; margintop: 30px"
          @click="addgoods"
          >确认</el-button
        >
      </Details>
    </transition>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Table from "../../components/table";
import Paging from "../../components/paging";
import Details from "../../components/details";
import getFileBase64 from "../../components/imgupload/toBse64";
import { uploadToGithub } from "../../components/imgupload/upload";
export default {
  name: "",
  data() {
    return {
      options: [
        {
          value: "-1",
          label: "全部",
        },
        {
          value: "1",
          label: "肉蛋禽",
        },
        {
          value: "2",
          label: "水果",
        },
        {
          value: "3",
          label: "甜品",
        },
        {
          value: "4",
          label: "饮品",
        },
        {
          value: "5",
          label: "零食",
        },
      ],
      options1: [
        {
          value: "-1",
          label: "全部",
        },
        {
          value: "1",
          label: "已上架",
        },
        {
          value: "2",
          label: "待上架",
        },
        {
          value: "3",
          label: "已下架",
        },
      ],
      options2: [
        {
          value: "1",
          label: "肉蛋禽",
        },
        {
          value: "2",
          label: "水果",
        },
        {
          value: "3",
          label: "甜品",
        },
        {
          value: "4",
          label: "饮品",
        },
        {
          value: "5",
          label: "零食",
        },
      ],
      tableConfig: {
        style: "width:100%;",
        config: [
          {
            label: "商品编码",
            prop: "Bm",
            sortable: "custom",
          },
          {
            label: "商品名称",
            prop: "name",
          },
          {
            label: "图片",
            prop: "img",
            formatter: (row, column, cellValue) => {
              return <img src={cellValue} style="width:50px;" />;
            },
          },
          {
            label: "价格",
            prop: "price",
            sortable: "custom",
          },
          {
            label: "商品分类",
            prop: "Index",
            formatter: (row, column, cellValue) => {
              return this.options[cellValue].label;
            },
          },
          {
            label: "创建时间",
            prop: "tiem",
            sortable: "custom",
          },
          {
            label: "状态",
            prop: "state",
            formatter: (row, column, cellValue) => {
              return this.options1[cellValue].label;
            },
          },
          {
            label: "操作",
            shown: true,
            isEdit: true,
            isDel: true,
            isParticulars: false,
            isUndercarriage: true,
          },
        ],
      },
      value: "",
      value1: "",
      value2: "",
      input: "",
      input1: "",
      input2: "",
      goodsdata: [],
      showdata: [],
      pageNum: 5,
      num: 1,
      radio: "1",
      img_url_pre: "https://cdn.jsdelivr.net/gh/auserisnot/cdn/",
      imageUrl: "",
      falgs: false,
      changeflag: false,
      goodsid: "",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.value = this.options[0].value;
    this.value1 = this.options1[0].value;
    this.search();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    search() {
      // console.log(this.$store);
      this.$store
        .dispatch("goods/GetGdata", {
          fselop: this.input,
          sselop: this.value,
          tselop: this.value1,
        })
        .then((res) => {
          this.goodsdata = res;
          this.handleCurrentChange(this.num);
        });
    },
    reset() {
      window.location.reload();
    },
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      this.pageNum = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页${val}`);
      this.num = val;
      this.showdata = this.goodsdata.slice(
        (val - 1) * this.pageNum,
        val * this.pageNum
      );
    },
    Edit(data) {
      this.falgs = true;
      this.input1 = data.name;
      this.imageUrl = data.img;
      this.value2 = data.Index;
      this.radio = data.state === "3" ? "2" : "1";
      this.goodsid = data.id;
      this.input2 = data.price;
      this.changeflag = true;
    },
    Delete(data) {
      console.log(data.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$store
            .dispatch("goods/goodsdel", { gid: data.id })
            .then((res) => {
              if (res.code === "01") {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.search();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    Undercarriage(data) {
      this.$confirm(
        `是否将商品进行${data.state === "1" ? "下架" : "上架"}处理?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
        .then(() => {
          this.$store
            .dispatch("goods/cgoodsstate", { gid: data.id, gstate: data.state })
            .then((res) => {
              if (res.code === "01") {
                this.$message({
                  type: "success",
                  message: `${data.state === "1" ? "下架" : "上架"}成功!`,
                });
                this.search();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    onSortChange(res) {
      let orderstr = "";

      if (res.prop === "Bm") {
        if (res.order === "ascending") {
          console.log("编号提升");
          orderstr = "Bm";
        } else if (res.order === "descending") {
          console.log("编号下降");
          orderstr = "Bm desc";
        }
      } else if (res.prop === "price") {
        if (res.order === "ascending") {
          console.log("价格提升");
          orderstr = "price";
        } else if (res.order === "descending") {
          console.log("价格下降");
          orderstr = "price desc";
        }
      } else if (res.prop === "tiem") {
        if (res.order === "ascending") {
          console.log("时间提升");
          orderstr = "tiem";
        } else if (res.order === "descending") {
          console.log("时间下降");
          orderstr = "tiem desc";
        }
      }
      this.$store.dispatch("goods/orderdata", { orderstr }).then((res) => {
        this.goodsdata = res;
        this.handleCurrentChange(this.num);
      });
    },
    showadd() {
      this.falgs = true;
      this.input1 = "";
      this.imageUrl = "";
      this.input2 = "";
      this.value2 = "";
      this.radio = "2";
      this.changeflag = false;
    },
    close() {
      this.falgs = false;
    },
    //图片上传
    async upload(param) {
      let base64Img = await getFileBase64(param.file);
      // console.log(base64Img);
      let res = await uploadToGithub(param.file.name, base64Img);
      console.log(res);
      this.imageUrl = this.img_url_pre + res.data.content.path;
    },
    addgoods() {
      let obj = {
        name: this.input1,
        img: this.imageUrl,
        state: this.radio,
        price: this.input2,
        Index: this.value2,
      };
      console.log(obj);
      if (this.changeflag) {
        // console.log(this.goodsid);
        this.$store
          .dispatch("goods/goodschange", { gid: this.goodsid, obj })
          .then((res) => {
            if (res.code === "01") {
              setTimeout(() => {
                this.$message({
                  type: "success",
                  message: `修改成功!`,
                });
                this.falgs = false;
              }, 1000);
              this.search();
            }
          });
      } else {
        this.$store.dispatch("goods/addgoods", { obj }).then((res) => {
          if (res.code === "01") {
            setTimeout(() => {
              this.$message({
                type: "success",
                message: `添加成功!`,
              });
              this.falgs = false;
            }, 1000);
            this.search();
          }
        });
      }
    },
  },
  components: {
    // Gtable,
    Table,
    Paging,
    Details,
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.goodslist {
  width: 90%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  font-size: 13px;
}
.title {
  height: 50px;
  display: flex;
  justify-content: space-between;
  line-height: 50px;
}
.title .searchbox {
  display: flex;
}
.title > .searchbox > p {
  margin-right: 30px;
}
.title .bottonlist > span {
  display: inline-block;
  width: 90px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 40px;
  background-color: white;
  margin-right: 15px;
  cursor: pointer;
}
.title .bottonlist > span.import {
  background-color: #3ca1ff;
  color: white;
}
.tablebox {
  width: 100%;
  margin-top: 20px;
}
.goodsinfo-leave-active,
.goodsinfo-enter-active {
  transition: all 1s ease;
}

.goodsinfo-leave-active,
.goodsinfo-enter {
  height: 0px !important;
}

.gclon {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.gclon > i {
  font-size: 13px;
}
.gclon > span {
  font-size: 13px;
}
.infocon {
  margin-top: 20px;
}
.infocon > p {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.infocon > p > span {
  font-size: 17px;
}
.pageing {
  text-align: right;
  margin-top: 20px;
}

/*上传样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.infocon > p >>> .el-upload {
  border: 1px dashed #ccc;
}
.infocon > p >>> .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 72px;
  height: 72px;
  line-height: 72px;
  text-align: center;
}
.avatar {
  width: 72px;
  height: 72px;
  display: block;
}
</style>
<style>
.sel .el-select .el-input--suffix .el-input__inner {
  width: 100px;
  height: 30px;
}
.sel1 .el-select .el-input--suffix .el-input__inner {
  width: 100px;
  height: 30px;
}
.sel .el-input__suffix .el-input__suffix-inner .el-input__icon {
  line-height: 0px;
}
.sel1 .el-input__suffix .el-input__suffix-inner .el-input__icon {
  line-height: 0px;
}
.inp .el-input--suffix .el-input__inner {
  width: 130px;
  height: 30px;
}
</style>